<template>
  <div class="an-head">
    <div class="container">
      <div class="an-head-hang">
        <b-navbar toggleable="lg" type="light">
          <b-navbar-brand href="/">
            <div class="an-logo">
              <img src="~/assets/img/logo2_05.png" />
            </div>
          </b-navbar-brand>

          <b-navbar-toggle target="nav_collapse" />

          <b-collapse id="nav_collapse" is-nav>
            <!-- Right aligned nav items -->
            <b-navbar-nav class="ml-auto" right>
              <b-nav-item href="/">首页</b-nav-item>
              <b-nav-item href="/view/listPage">文章列表</b-nav-item>
              <b-nav-item href="/view/userMsg">用户留言</b-nav-item>
            </b-navbar-nav>
          </b-collapse>
        </b-navbar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnHead",
  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.an-logo {
  position: absolute;
  top: 0;
  left: 0px;
}
.an-head .container {
  min-height: auto;
}
.an-head-hang {
  width: 100%;
  padding-top: 40px;
  position: relative;
}
</style>
